<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>方案选择</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/menu.css" media="all">
<link rel="stylesheet" type="text/css" href="css/head.css"/>
<link rel="stylesheet" type="text/css" href="css/popDiv.css"/>

<script type="text/javascript" src="js/event.js"></script>
<script type="text/javascript" src="js/tween.js"></script>
<script src='js/jquery-1.9.1.js'></script>
<script src='js/jquery.zoom.js'></script>

  <script src="js/selected.js"></script>
</head>
<body class=“abg”>
<div class=“header” align="center"><img src="images/top.jpg" ></div>
	<div class="guider"  style="margin: 0 auto;background-color:#237fc5;width:1000px;height:40px">		
	<div class="headerinner">
			<ul class="headernav">

				<li><a href="#">主页</a></li>
				<li><a href="#">个人中心</a></li>
				<li><a href="#">疑问帮助</a></li>
				<li><a href="#">about</a></li>
				<li class="welcome_li" style="margin:0 0 0 350px;color:#FFFFFF"></li>
				<li class="logout_li"><a href="/userlogout">退出</a></li>
			</ul>

		</div>
	</div>
<div class="tabmain">
	
	<div id="outerWrap">
		
		<div id="sliderParent"></div>
		<div class="blueline" id="blueline" style="top: 0px; "></div>
		<ul class="tabGroup">
			<li class="tabOption selectedTab">基本信息</li>
			<li class="tabOption">优化选择</li>
			<li class="tabOption">风格选择</li>
			<li class="tabOption">客厅选择</li>
			<li class="tabOption">书房选择</li>
			<li class="tabOption">房门选择</li>
			<li class="tabOption">橱柜选择</li>
			<li class="tabOption">选择确认</li>
		</ul>
		<div id="container">
			<div id="content">
			
				<div class="tabContent selectedContent">
					
					<h3 style="">基本信息确认</h3>
					<div class="base_info" style="width:40%; height:400px; display:inline-block">
						<div class ="input_left">姓名：&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input class="user_name" type=text  disabled></div>
						<div class ="input_left">身份证号：<input class="user_id" type=text  disabled></div>
						<div class ="input_left">房号：&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input class="user_houseNum" type=text  disabled></div>
						<div class ="input_left">地址：&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input class="user_address" type=text  disabled></div>
						<div class ="input_left">装修商：&nbsp&nbsp&nbsp <input class="user_decoration" type=text  disabled></div>
					</div>
					<div class="info_detail" style="width:40%; height：400px;  display:inline-block">
						<img style="display:inline-block; width:100%;height:100%;" class="user_housekind">
					</div>
					
				</div>
				
				<div class="tabContent">
					
					<h3>户型优化选择</h3>
						<div class="phone">

							<input type="hidden" id="aaa" value="" />
							
							<div class="sys_item_spec">
								<dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="1">
									<dd>
										<ul class="sys_spec_img" id="style_choose">
 											<!-- <li data-aid="1"><a href="javascript:;"><img id="1"  src="images/90_A1.png" width="180" height="135"  /><span>asdfasdfasdfasdfasdfasdfas</span><i></i></a></li> -->
										</ul>
									</dd>
								</dl>
							</div>

						</div>
				</div>
				
				<div class="tabContent">
					<h3>装修风格选择</h3>
						<div class="phone">

							<input type="hidden" id="aaa" value="" />
							
							<div class="sys_item_spec">
								<dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="1">
									<dd>
										<ul class="sys_spec_img" id="design_choose">
										

										</ul>
									</dd>
								</dl>
							</div>

						</div>
					
				</div>
				
				<div class="tabContent">
					
					<h3>客厅墙地面组合</h3>
						<div class="phone">
							<div><h1><b>请选择地板：</b></h1></div>
							<input type="hidden" id="aaa" value="" />
							
							<div class="sys_item_spec">
								<dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="1">
									<dd>
										<ul class="sys_spec_img" id="livingroom_floor_choose">
										

										</ul>
									</dd>
								</dl>
							</div>
					
						</div>
						<div class="phone" >
							<div><h1><b>请选择墙面：</b></h1></div>
							<input type="hidden" id="aaa" value="" />
							
							<div class="sys_item_spec">
								<dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="1">
									<dd>
										<ul class="sys_spec_img" id="livingroom_wall_choose">
										

										</ul>
									</dd>
								</dl>
							</div>
					
						</div>
					
				</div>
				
				<div class="tabContent">
					<h3>卧室书房墙地面组合</h3>
						<div class="phone">
							<div><h1><b>请选择地板：</b></h1></div>
							<input type="hidden" id="aaa" value="" />
							
							<div class="sys_item_spec">
								<dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="1">
									<dd>
										<ul class="sys_spec_img" id="bedroom_floor_choose">
									

										</ul>
									</dd>
								</dl>
							</div>

						</div>
						<div class="phone">
							<div><h1><b>请选择墙面：</b></h1></div>
							<input type="hidden" id="aaa" value="" />
							
							<div class="sys_item_spec">
								<dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="1">
									<dd>
										<ul class="sys_spec_img" id="bedroom_wall_choose">
									

										</ul>
									</dd>
								</dl>
							</div>

						</div>
				</div>
				
				<div class="tabContent">
					
					<h3>门样式选择</h3>
						<div class="phone">

							<input type="hidden" id="aaa" value="" />
							
							<div class="sys_item_spec">
								<dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="1">
									<dd>
										<ul class="sys_spec_img" id="door_choose">
					

										</ul>
									</dd>
								</dl>
							</div>

						</div>
					
				</div>
				
				<div class="tabContent">
					
					<h3>橱柜选择</h3>
						<div class="phone">

							<input type="hidden" id="aaa" value="" />
							
							<div class="sys_item_spec">
								<dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="1">
									<dd>
										<ul class="sys_spec_img">
											<li class="testzoom" data-aid="1">
												<a href="javascript:;"><img id="1"  src="images/chugui_111_small.jpg" width="180" height="135"  /><span>橱柜1</span><i></i></a>
												
												
											</li>
											
											<li data-aid="2">
												<a href="javascript:;"><img id="1"  src="images/chugui_222.jpg"  width="180" height="135"  /><span>橱柜2</span><i></i></a>
												
												
											</li>

										</ul>
									</dd>
								</dl>
							</div>

						</div>
				</div>
				<div class="tabContent">
					
					<h3>选择确认</h3>
					<div class="confirm_choose">
					<input type="button" value="预览" onclick="ShowDiv('MyDiv','fade')" style="display:inline-block; width:80px; margin:50px 0 0 300px;">
					<input type="button" value="确认" onclick="javascript:window.open('test.jsp');"  style="display:inline-block; width:80px; margin:50px 0 0 50px;">
					<div id="fade" class="black_overlay"></div>
					<div id="MyDiv" class="white_content">
					<div style="text-align: right; cursor: default; height: 40px;"><span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
						</div>
						<table>  
				            <tr>  
				                <td class="key">姓名：</td>  
				                <td><input type="text" name="name_ok" class="textName"/></td>  
				 				<td class="key">身份证：</td>  
				                <td><input type="text" name="id_ok" class="textId"/></td> 
				            </tr>  
				            <tr>  
				                <td class="key">房号：</td>  
				                <td><input type="text" name="num_ok" class="textNum"/></td>  
				                <td class="key">装修商：</td>  
				                <td><input type="text" name="dec_ok" class="textDec"/></td>  
				            </tr>
				                        <tr>  
				                <td class="key">优化户型：</td>  
				                <td><input type="text" name="style_ok" class="textStyle"/></td>  
				                <td class="key">装修风格：</td>  
				                <td><input type="text" name="design_ok" class="textDesign"/></td>  
				            </tr> 
				            <tr>  
				                <td class="key">客厅地面：</td>  
				                <td><input type="text" name="livingroom_floor_ok" class="textLivefloor"/></td>   
				                <td class="key">客厅墙面：</td>
				                <td><input type="text" name="livingroom_wall_ok" class="textLivewall"/></td>  
				             </tr>
				             <tr>   
				                <td class="key">卧室地面：</td>  
				                <td><input type="text" name="bedroom_floor_ok" class="textBedfloor"/></td> 
				                <td class="key">卧室墙面：</td>  
				                <td><input type="text" name="bedroom_wall_ok" class="textBedwall"/></td> 
				            </tr> 
				            <tr>
				        		 <td class="key">价格：</td>  
				                <td><input type="text" name="dec_ok" class="textPrice" value="6000"/></td>  
				            </tr>
				         </table>    
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
var container = document.getElementById('container');
var content = document.getElementById('content');
var oDivs = DOM.children(content, "div");
oDivs[0].st = 0;
for (var i = 1; i < oDivs.length; i++) {
    oDivs[i].st = oDivs[i].offsetTop;
}
var oLis = DOM.getElesByClass("tabOption");
var flag = 0;
var upFlag = oLis.length;; (function() {
    function fn(e) {
        e = e || window.event;
        if (e.wheelDelta) {
            var n = e.wheelDelta;
        } else if (e.detail) {
            var n = e.detail * -1;
        }
        if (n > 0) {
            container.scrollTop -= 30;
        } else if (n < 0) {
            container.scrollTop += 30;
        }
        slider.style.top = container.scrollTop * container.offsetHeight / content.offsetHeight + "px";
        slider.offsetTop * (content.offsetHeight / container.offsetHeight);
        var st = container.scrollTop;
        if (st > this.preSt) {
            for (var j = 0; j < oLis.length; j++) {
                if (st < oDivs[j].st) break;
            }
            if (oLis[j - 2] && this.preLi !== j) {
                if ((j) > (flag + 1)) {
                    DOM.removeClass(oLis[j - 2], "selectedTab");
                    DOM.addClass(oLis[j - 1], "selectedTab");
                    animate(blueline, {
                        top: (j - 1) * 48
                    },
                    500, 2);
                }
            }
            flag = j - 1;
        } else if (st < this.preSt) {
            for (var j = oLis.length - 1; j >= 0; j--) {
                if (st > oDivs[j].st) break;
            }
            if (oLis[j + 2] && this.preLi !== j) {
                if (flag === undefined) return;
                if ((j) < (flag)) {
                    for (var k = 0; k < oLis.length; k++) {
                        DOM.removeClass(oLis[k], "selectedTab");
                    };
                    DOM.addClass(oLis[j + 1], "selectedTab");
                    animate(blueline, {
                        top: (j + 1) * 48
                    },
                    500, 2);
                    upFlag = j + 1;
                }
            }
        }
        this.preSt = st;
        if (e.preventDefault) e.preventDefault();
        return false;
    }
    container.onmousewheel = fn;
    if (container.addEventListener) container.addEventListener("DOMMouseScroll", fn, false);
    slider = document.createElement('span');
    slider.id = "slider";
    slider.style.height = container.offsetHeight * (container.offsetHeight / content.offsetHeight) + "px";
    sliderParent.appendChild(slider);
    on(slider, "mousedown", down);
    var blueline = document.getElementById("blueline");
    function changeTab() {
        var index = DOM.getIndex(this);
        for (var i = 0; i < oLis.length; i++) {
            DOM.removeClass(oLis[i], "selectedTab");
        }
        DOM.addClass(this, "selectedTab");
        animate(container, {
            scrollTop: oDivs[index].offsetTop,
        },
        500, 1);
        var t = oDivs[index].st * container.offsetHeight / content.offsetHeight;
        animate(slider, {
            top: t
        },
        500);
        animate(blueline, {
            top: index * 48
        },
        500, 2);
    }
    var tabPannel1 = document.getElementById("outerWrap");
    var oLis = DOM.children(DOM.children(tabPannel1, "ul")[0], "li");
    for (var i = 0; i < oLis.length; i++) {
        oLis[i].onclick = changeTab;
    };
})();


//请求选择项
$(function(){

	 $.ajax(
				{
				url:"choose/user/"+"<%=session.getAttribute("userId")%>",
				type:'get',

			    success: function(data){
			    	$(".user_name").val(data.userName);
			    	$(".user_id").val(data.userId);
			    	$(".user_houseNum").val(data.userHousenum);
			    	$(".user_address").val(data.userAddress);
			    	$(".user_decoration").val(data.userDecoration);			    	
			    	$(".user_housekind").attr("src", "images/"+data.userHousekind+"_prototype.jpg"); 
			    		$('.info_detail').zoom({url: "images/"+data.userHousekind+"_prototype.jpg"});
			    	$(".welcome_li").text(data.userName+"   欢迎您！");

			    },
			    dataType: "json", 

			    }); 
	 $.ajax(
			 {
				 url:"choose/style/90",
					type:'get',

				    success: function(data){

						for(var i=0;i<data.length;i++){
						$("#style_choose").append('<li data-aid='+i+'><a href="javascript:;"><img id='+i+'  src='+data[i].stylePicture+' width="180" height="135"  /><span>'+data[i].styleKind+'</span><i></i></a></li>');	
						}
														
				    },
				    dataType: "json",  
			 });
	 $.ajax(
			 {
				 url:"choose/design",
					type:'get',

				    success: function(data){

						for(var i=0;i<data.length;i++){
						$("#design_choose").append('<li data-aid='+i+'><a href="javascript:;"><img id='+i+'  src='+data[i].designPicture+' width="180" height="135"  /><span>'+data[i].designKind+'</span><i></i></a></li>');	
						}
														
				    },
				    dataType: "json", 
			 });
	 
	 $.ajax(
			 {
				 url:"choose/floor",
					type:'get',

				    success: function(data){

						for(var i=0;i<data.length;i++){
						$("#livingroom_floor_choose").append('<li data-aid='+i+'><a href="javascript:;"><img id='+i+'  src='+data[i].floorPicture+' width="180" height="135"  /><span>'+data[i].floorKind+'</span><i></i></a></li>');	
						}
														
				    },
				    dataType: "json", 
			 });
	 
	 $.ajax(
			 {
				 url:"choose/floor",
					type:'get',

				    success: function(data){

						for(var i=0;i<data.length;i++){
						$("#bedroom_floor_choose").append('<li data-aid='+i+'><a href="javascript:;"><img id='+i+'  src='+data[i].floorPicture+' width="180" height="135"  /><span>'+data[i].floorKind+'</span><i></i></a></li>');	
						}
														
				    },
				    dataType: "json", 
			 });
	 $.ajax(
			 {
				 url:"choose/wall",
					type:'get',

				    success: function(data){

						for(var i=0;i<data.length;i++){
						$("#bedroom_wall_choose").append('<li data-aid='+i+'><a href="javascript:;"><img id='+i+'  src='+data[i].wallPicture+' width="180" height="135"  /><span>'+data[i].wallKind+'</span><i></i></a></li>');	
						
						$("#livingroom_wall_choose").append('<li data-aid='+i+'><a href="javascript:;"><img id='+i+'  src='+data[i].wallPicture+' width="180" height="135"  /><span>'+data[i].wallKind+'</span><i></i></a></li>');	
						}
														
				    },
				    dataType: "json", 
			 });
	 
	 $.ajax(
			 {
				 url:"choose/door",
					type:'get',

				    success: function(data){

						for(var i=0;i<data.length;i++){
						$("#door_choose").append('<li data-aid='+i+'><a href="javascript:;"><img id='+i+'  src='+data[i].doorPicture+' width="180" height="135"  /><span>'+data[i].doorKind+'</span><i></i></a></li>');	
						}
														
				    },
				    dataType: "json", 
			 });
	 
			 
})


 $(window).load(function(){

	/* $(".sys_item_spec .sys_item_specpara").each(function(){
		var i=$(this);
		var p=i.find("ul>li");
		 p.click(function(){
			if(!!$(this).hasClass("selected")){
				$(this).removeClass("selected");
				i.removeAttr("data-attrval");
				 $("#aaa").val("");
			}else{
				$(this).addClass("selected").siblings("li").removeClass("selected");
				i.attr("data-attrval",$(this).attr("data-aid"))
			}
		}) 
		 $(document).on("click",p,function(){
			if(!!$(this).hasClass("selected")){
				$(this).removeClass("selected");
				i.removeAttr("data-attrval");
				 $("#aaa").val("");
			}else{
				$(this).addClass("selected").siblings("li").removeClass("selected");
				i.attr("data-attrval",$(this).attr("data-aid"))
			}
		}) 
	}) */
	 var $i = $('.sys_item_spec .sys_item_specpara');
	 $(document).on("click",".sys_item_spec .sys_item_specpara ul>li",function(){
			if(!!$(this).hasClass("selected")){
				$(this).removeClass("selected");
				$i.removeAttr("data-attrval");
				 $("#aaa").val("");
			}else{
				$(this).addClass("selected").siblings("li").removeClass("selected");
				$i.attr("data-attrval",$(this).attr("data-aid"))
			}
		}) 


}) 

//弹出隐藏层
function ShowDiv(show_div,bg_div){
		document.getElementById(show_div).style.display='block';
		document.getElementById(bg_div).style.display='block' ;
		var bgdiv = document.getElementById(bg_div);
		bgdiv.style.width = document.body.scrollWidth;
	// bgdiv.style.height = $(document).height();
		$("#"+bg_div).height($(document).height());
		
		var arr = new Array();
		var i = 0;
		$('.selected span').each(function(){

			arr[i] = $(this).text();
			i++;
		})
		$('.textName').val($('.user_name').val());
		$('.textId').val($('.user_id').val());
		$('.textNum').val($('.user_houseNum').val());
		$('.textDec').val($('.user_decoration').val());
		$('.textStyle').val(arr[0]);
		$('.textDesign').val(arr[1]);
		$('.textLivefloor').val(arr[2]);
		$('.textLivewall').val(arr[3]);
		$('.textBedfloor').val(arr[4]);
		$('.textBedwall').val(arr[5]);
		
};
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
		document.getElementById(show_div).style.display='none';
		document.getElementById(bg_div).style.display='none';
};




</script>
<div class=“footer” align="center"><img src="images/footer.png" ></div>
</body>
</html>
